<template>
	<view class="page-view">
		<navBar title="保养登记"></navBar>
		 <!-- <scroll-view scroll-y="true" scroll-with-animation :scroll-top="scrollTop" @scroll="scroll" :style="{height: scrollViewHeight+'px'}"> -->
			<view class="bgfff mb-16rpx pb-32rpx">
				<view class="w-100% h-88rpx flex-space-between">
					<view class="flex-wrap-left navigation-little-title ml-32rpx">
						<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>设备信息
					</view>
				</view>
				<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
				<sanCode :equpInfo="equpInfo" :deviceCode="''" :isDisabled="props.isList==1" :query-api="getKeepPlanByBarcode" :data="'equpNo'" @confirmCode="confirmCode" :class="isInfoShow?'mb-38rpx':''"></sanCode>
				<view class="flex-space-between ml-48rpx mr-48rpx device-view" v-if="isInfoShow">
					<view class="text-view">
						<label for="">设备型号：</label>
						<text class="u-line-1">{{equpInfo.equpSpec}}</text>
					</view>
					<view class="text-view">
						<label for="">保养类别：</label>
						<text class="u-line-1">{{equpInfo.keepType}}</text>
					</view>
				</view>
			</view>
			<view class="bgfff mb-16rpx pb-32rpx">
				<view class="w-100% h-88rpx flex-space-between">
					<view class="flex-wrap-left navigation-little-title ml-32rpx">
						<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>保养人
					</view>
				</view>
				<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
				<view class="flex-space-between ml-48rpx mr-48rpx mt-24rpx device-view">
					<view class="text-view">
						<label for="">人员编号：</label>
						<text class="u-line-1">{{userInfo.userId}}</text>
					</view>
					<view class="text-view">
						<label for="">人员姓名：</label>
						<text class="u-line-1">{{userInfo.nickName}}</text>
					</view>
				</view>
				<view class="ml-48rpx mr-48rpx mt-30rpx item-view flex-wrap-left">
					<label>保养日期:</label>
					<view class="form-input flex-space-between" @click="showStart = true">
						<input v-model="equpInfo.keepDate" disabled="" class="uni-input" confirm-type="search" placeholder="请选择保养日期" />
						<text class="date-text">选择日期</text>
					</view>
				</view>
			</view>
			<view class="bgfff mb-16rpx pb-32rpx">
				<view class="w-100% h-88rpx flex-space-between">
					<view class="flex-wrap-left navigation-little-title ml-32rpx">
						<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>保养内容
					</view>
				</view>
				<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
				<view class="flex-space-between ml-48rpx mr-48rpx mt-24rpx device-view">
					<textarea v-model="equpInfo.remark" :maxlength="300" @focus="addInputTop" @blur="removeInputTop" :adjust-position="true" show-confirmbar placeholder-style="color:#CACACA" placeholder="请输入此次保养内容" />
				</view>
			</view>
			<view class="bgfff mb-120rpx pb-32rpx">
				<view class="w-100% h-88rpx flex-space-between">
					<view class="flex-wrap-left navigation-little-title ml-32rpx">
						<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>设备故障登记
					</view>
				</view>
				<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
				<view class="flex-space-between ml-48rpx mr-48rpx mt-24rpx register-view">
					<view class="register-btn" @click="goFaultRegister">设备故障登记</view>
				</view>
				
			</view>		
		<!-- </scroll-view> -->
		<view class="suctionbottom">
			<view v-if="isInfoShow && equpInfo.keepDate && equpInfo.remark" class="yes button"  @click="submitBtn">
				提交
			</view>
			<view v-else class="no button">
				提交
			</view>
		</view>
		<!-- 选择日期 -->
		<u-calendar v-model="showStart" :mode="'date'" @change="confirmDate"></u-calendar>
	</view>
</template>

<script setup lang="ts">
import navBar from '@/components/navbar.vue'
import sanCode from '@/components/deviceSanCode.vue'
import { setKeepResult,getKeepPlanByBarcode } from '@/common/api/keepPlan'
// import { onShow, onReachBottom } from "@dcloudio/uni-app"
import { ref, watch,onMounted,reactive,nextTick } from 'vue'
import moment from "moment";
const props = defineProps<{
	item ?: string|{};
	isList ?: number;
}>()
const equpInfo = ref({});
const showStart = ref<boolean>(false);
const tMarginBottom = ref<string>('0');
const scrollTop = ref<number>(0);
const oldScrollTop = reactive({
	scrollTop:0
});
const scrollViewHeight = ref<number>(0);
const userInfo = ref({
	nickName:'',
	userId:''
});
const isInfoShow = ref<boolean>(false);
if(props.isList){
	equpInfo.value = JSON.parse(props.item);
	isInfoShow.value = true;
}else{
	equpInfo.value.keepDate = moment(new Date()).format('yyyy-MM-DD');
}
onMounted(()=>{
	userInfo.value = uni.getStorageSync('userInfo');
	const query = uni.createSelectorQuery();
	query.select('.page-view').boundingClientRect((data:any) => {
		scrollViewHeight.value = data.height - 112;
	}).exec();
})
const confirmCode = (data)=>{
	if(Object.keys(data).length>1){
	isInfoShow.value = true;
	}else{
		isInfoShow.value = false;
	}
	equpInfo.value = data;
}
// 选择日期确定
const confirmDate = (time:any)=> {
	equpInfo.value.keepDate = time.result;
}
const scroll = (e)=>{
	oldScrollTop.scrollTop = e.detail.scrollTop
}
const addInputTop = (event)=> {  
	tMarginBottom.value = event.detail.height+'px'  
    // 滚动到指定位置
	nextTick(()=>{
     scrollTop.value = event.detail.height;
	})
}
const removeInputTop = (event)=> {    
	nextTick(()=>{
     scrollTop.value = 0;
	 tMarginBottom.value = '0';
	})
}
//故障登记
const goFaultRegister = ()=> {    
	uni.navigateTo({
		url: '/pages/DeviceFaultRegister/faultRegister',
	});
}
//提交
const submitBtn = ()=> {
	if(!equpInfo.value.equpNo){
		uni.showToast({
			title: '请输入设备编码',
			icon: 'none',
		});
		return
	}
	if(!equpInfo.value.keepDate){
		uni.showToast({
			title: '请选择保养日期',
			icon: 'none',
		});
		return
	}
	setKeepResult({
		  "equpName": equpInfo.value.equpName,
		  "equpNo": equpInfo.value.equpNo,
		  "equpSpec": equpInfo.value.equpSpec,
		  "keepDate": equpInfo.value.keepDate,
		  "keepName": userInfo.value.nickName,
		  "keepType": equpInfo.value.keepType,
		  "keepCode": userInfo.value.userId,
		  "remark": equpInfo.value.remark,
		  "planId":equpInfo.value.id,
		  "processDesc":equpInfo.value.processDesc,
	}).then(res=>{
		if(res.code ===2000){
			uni.showToast({
				title: res.msg,
				icon: 'none',
			});
			uni.redirectTo({
				url: '/pages/homePage/index',
			});
		}
	})
}
</script>

<style lang="scss" scoped>
	.page-view{
		background-color: #f5f5f5;
		height: 100vh;
		overflow-y: auto;
	}
	.bgfff{
		background-color: #fff;
	}
	.navigation-little-title {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #0F1F2D;
		line-height: 28rpx;
	}
	.item-view{
		label{
			width: 120rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4B4D55;
			line-height: 32rpx;
		}
		.form-input{
			width: calc(100% - 120rpx);
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 2rpx;
			border: 1rpx solid #DDDDDD;
			padding: 0 24rpx;
			position: relative;
			.uni-input-form{
				font-size: 24rpx;
				
			}
			.uni-input-placeholder{
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CACACA;
			}
			.qr-img,.date-text{
				position: absolute;
				top: 22rpx;
				right: 24rpx;
			}
			.date-text{
				color: #2F7BFF;
			}
		}
	}
	.device-view{
		
		.text-view{
			width: 50%;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4B4D55;
			label{
				width: 120rpx;
			}
			text{
				display: inline-block;
				max-width: calc(100% - 130rpx);
				vertical-align: text-bottom;
			}
		}
		uni-textarea{
			width: 654rpx;
			height: 118rpx;
		}
		::v-deep .uni-textarea-placeholder{
			// z-index: 9;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #CACACA;
			padding: 20rpx;
		}
		::v-deep .uni-textarea-textarea{
			width: 654rpx;
			height: 118rpx;
			border-radius: 2rpx;
			border: 1rpx solid #DDDDDD;
			padding: 20rpx;
			box-sizing: border-box;
		}
		.uni-textarea-wrapper{
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
	.register-view{
		
		.register-btn{
			width: 686rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: rgba(47,123,255,0.1);
			text-align: center;
			color: #1E1F22;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
		}
	}
	.suctionbottom .button {
		width: 100%;
		height: 88rpx;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		line-height: 84rpx;
		text-align: center;
	}
	.suctionbottom .no {
		background: #99beff;
		border: 1rpx solid #99beff;
		color: #FFFFFF;
	}
	.suctionbottom .yes {
		background: #2F7BFF;
		border: 1rpx solid #2F7BFF;
		color: #FFFFFF;
	}
	
	.suctionbottom .yes:active {
		background: #99beff;
		border: 1rpx solid #99beff;
		color: #FFFFFF;
	}
</style>
